<template>
    <el-dialog title="到达确报查询" :visible.sync="dialogForm" :modal-append-to-body="false" width="1000px" style="margin-top: 0vh;">
        <base-list ref="arrive" :condition="condition" :datas="arrive" :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="110px">
                <el-row>
                    <!--<el-col :span="8">-->
                    <!--<el-form-item label="箱号">-->
                    <!--<el-input v-model="condition['search_LIKE_containerNo']"></el-input>-->
                    <!--</el-form-item>-->
                    <!--</el-col>-->
                    <el-col :span="8">
                        <el-form-item label="发站">
                            <el-input v-model="condition['search_LIKE_stratStationName']"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="到站">
                            <el-input v-model="condition['search_LIKE_endStationName']"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <!--<el-row>-->
                <!--<el-col :span="16">-->
                <!--<el-form-item label="接车时间">-->
                <!--<date-slot :startDate.sync="condition['search_GTE_operateTime']"-->
                <!--:endDate.sync="condition['search_LTE_operateTime']"></date-slot>-->
                <!--</el-form-item>-->
                <!--</el-col>-->
                <!--</el-row>-->
                <el-row>
                    <el-col :span="24">
                        <el-button type="primary" icon="el-icon-search" @click="loadData" class="ml-110">查 询</el-button>
                        <el-button @click="handleExport">明细导出</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table slot="list" :data="arrive" border stripe max-height="500" :span-method="objectSpanMethod">
                <el-table-column label="序号" type="index" width="55">
                    <template slot-scope="scope">
                        {{scope.$index+1}}
                    </template>
                </el-table-column>
                <el-table-column prop="wagonNo" label="车皮号" min-width="120"></el-table-column>
                <el-table-column prop="container" label="箱号" width="120">
                    <template slot-scope="scope">

                        <div v-if="scope.row.container!==null&&scope.row.container.length===2">
                            <div style="padding-bottom:8px">
                                {{scope.row.container[0].containerNo}}
                            </div>
                            <div class="table-line-diy"></div>
                            <div style="padding-top:8px">
                                {{scope.row.container[1].containerNo}}
                            </div>
                        </div>
                        <div v-else-if="scope.row.container!==null&&scope.row.container.length===1">
                            {{ scope.row.container[0].containerNo }}
                        </div>
                        <div v-else>

                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="container" label="尺寸" width="50">
                    <template slot-scope="scope">
                        <div v-if="scope.row.container!==null&&scope.row.container.length===2">
                            <div style="padding-bottom:8px">
                                {{scope.row.container[0].containerSize}}
                            </div>
                            <div class="table-line-diy"></div>
                            <div style="padding-top:8px">
                                {{scope.row.container[1].containerSize}}
                            </div>
                        </div>
                        <div v-else-if="scope.row.container!==null&&scope.row.container.length===1">
                            {{ scope.row.container[0].containerSize }}
                        </div>
                        <div v-else>

                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="container" label="箱型" width="50">
                    <template slot-scope="scope">
                        <div v-if="scope.row.container!==null&&scope.row.container.length===2">
                            <div style="padding-bottom:8px">
                                {{scope.row.container[0].containerType}}
                            </div>
                            <div class="table-line-diy"></div>
                            <div style="padding-top:8px">
                                {{scope.row.container[1].containerType}}
                            </div>
                        </div>
                        <div v-else-if="scope.row.container!==null&&scope.row.container.length===1">
                            {{ scope.row.container[0].containerType }}
                        </div>
                        <div v-else>

                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="container" label="空重" width="50">
                    <template slot-scope="scope">
                        <div v-if="scope.row.container!==null&&scope.row.container.length===2">
                            <div style="padding-bottom:8px">
                                {{scope.row.container[0].ifHeavy | _filterIfHeavyType}}
                            </div>
                            <div class="table-line-diy"></div>
                            <div style="padding-top:8px">
                                {{scope.row.container[1].ifHeavy | _filterIfHeavyType}}
                            </div>
                        </div>
                        <div v-else-if="scope.row.container!==null&&scope.row.container.length===1">
                            {{ scope.row.container[0].ifHeavy | _filterIfHeavyType}}
                        </div>
                        <div v-else>

                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="container" label="内外贸" width="70">
                    <template slot-scope="scope">
                        <div v-if="scope.row.container!==null&&scope.row.container.length===2">
                            <div style="padding-bottom:8px">
                                {{scope.row.container[0].tradeType | _filterTradeType}}
                            </div>
                            <div class="table-line-diy"></div>
                            <div style="padding-top:8px">
                                {{scope.row.container[1].tradeType | _filterTradeType}}
                            </div>
                        </div>
                        <div v-else-if="scope.row.container!==null&&scope.row.container.length===1">
                            {{ scope.row.container[0].tradeType | _filterTradeType}}
                        </div>
                        <div v-else>

                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="container" label="箱主" width="130">
                    <template slot-scope="scope">
                        <div v-if="scope.row.container!==null&&scope.row.container.length===2">
                            <div style="padding-bottom:8px">
                                {{scope.row.container[0].ownerName}}
                            </div>
                            <div class="table-line-diy"></div>
                            <div style="padding-top:8px">
                                {{scope.row.container[1].ownerName}}
                            </div>
                        </div>
                        <div v-else-if="scope.row.container!==null&&scope.row.container.length===1">
                            {{ scope.row.container[0].ownerName }}
                        </div>
                        <div v-else>

                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="container" label="货名" width="90">
                    <template slot-scope="scope">
                        <div v-if="scope.row.container!==null&&scope.row.container.length===2">
                            <div style="padding-bottom:8px">
                                {{scope.row.container[0].cargoName}}
                            </div>
                            <div class="table-line-diy"></div>
                            <div style="padding-top:8px">
                                {{scope.row.container[1].cargoName}}
                            </div>
                        </div>
                        <div v-else-if="scope.row.container!==null&&scope.row.container.length===1">
                            {{ scope.row.container[0].cargoName }}
                        </div>
                        <div v-else>

                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="container" label="货重" width="60">
                    <template slot-scope="scope">
                        <div v-if="scope.row.container!==null&&scope.row.container.length===2">
                            <div style="padding-bottom:8px">
                                {{scope.row.container[0].cargoWeight}}
                            </div>
                            <div class="table-line-diy"></div>
                            <div style="padding-top:8px">
                                {{scope.row.container[1].cargoWeight}}
                            </div>
                        </div>
                        <div v-else-if="scope.row.container!==null&&scope.row.container.length===1">
                            {{ scope.row.container[0].cargoWeight }}
                        </div>
                        <div v-else>

                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="shipper" label="托运人" :show-overflow-tooltip="true" min-width="120"></el-table-column>
                <el-table-column prop="shipperTel" label="联系电话" min-width="135"></el-table-column>
                <el-table-column prop="consignee" label="收货人" :show-overflow-tooltip="true" min-width="120"></el-table-column>
                <el-table-column prop="consigneeTel" label="联系电话" min-width="135"></el-table-column>
            </el-table>
        </base-list>
    </el-dialog>
</template>

<script>
import { arriveList } from "@/api/gatePanel/gatePanel";
import { newExportExcel } from "@/utils/newExport";
import { ifHeavyType, tradeType } from "@/assets/dict";
import dateSlot from "@/components/date/dateSlot";

export default {
    name: "arriveComponents",
    components: { dateSlot },
    data() {
        return {
            pageSearch: arriveList,
            condition: {
                search_IN_status: "NOOPERATE,OPERATING"
            },
            arrive: [],
            dialogForm: false
        };
    },
    methods: {
        loadData() {
            this.$refs.arrive.loadData().then(res => {
                this.arrive = [];
                // 设置2条数据的planNo相同时，合并行
                // 不会影响其他功能
                let _tmp = res.aaData;
                for (let i = 0; i < _tmp.length; i++) {
                    //默认只有2条会重复
                    if (i % 2 == 1) {
                        //查询前一条数据
                        if (_tmp[i - 1].planNo == _tmp[i].planNo) {
                            //标记前一条数据为合并
                            _tmp[i - 1].merge = true;
                            //标记当前数据为已合并数据
                            _tmp[i].merged = true;
                        }
                        //查询后一条数据
                        if (_tmp[i + 1]) {
                            if (_tmp[i + 1].planNo == _tmp[i].planNo) {
                                //标记当前数据为合并
                                _tmp[i].merge = true;
                                //标记后一条数据为已合并数据
                                _tmp[i + 1].merged = true;
                            }
                        }
                    }
                    //- 2018-5-27 18：23 更改
                    //- 追加options参数,判断最后是否有操作按钮
                    _tmp[i].options = "";
                }
                this.arrive = _tmp;
            });
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (
                column.property == "id" ||
                column.property == "wagonNo" ||
                column.property == "shipper" ||
                column.property == "shipperTel" ||
                column.property == "consignee" ||
                column.property == "consigneeTel" ||
                column.property == "options"
            ) {
                if (row.merge) {
                    //合并当前行
                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else if (row.merged) {
                    //标记当前为已合并
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },
        handleExport() {
            let title = "到达确报";
            let map = new Map();
            map.set("wagonNo", "车皮号");
            map.set("shipper", "托运人");
            map.set("shipperTel", "联系电话");
            map.set("consignee", "收货人");
            map.set("consigneeTel", "联系电话");
            map.set("containerNo", "箱号");
            map.set("containerSize", "尺寸");
            map.set("ifHeavy", "空重");
            map.set("tradeType", "内外贸");
            map.set("ownerName", "箱主");
            map.set("stratStationName", "发站");
            map.set("endStationName", "到站");
            map.set("cargoName", "货名");
            map.set("cargoWeight", "货重");
            let exportRecords = [];
            let exportArr = JSON.parse(JSON.stringify(this.arrive));
            exportArr.forEach(record => {
                let exportRecord = {};
                for (let [key, value] of map.entries()) {
                    if (key === "ifHeavy") {
                        record[key] = ifHeavyType.get(record[key]);
                    }
                    if (key === "tradeType") {
                        record[key] = tradeType.get(record[key]);
                    }
                    exportRecord[value] = record[key];
                }
                exportRecords.push(exportRecord);
            });
            newExportExcel(title, exportRecords);
        }
    },
    watch: {
        dialogForm(bool) {
            if (!bool) {
                this.condition = {
                    search_IN_status: "NOOPERATE,OPERATING"
                };
            }
        }
    }
};
</script>

<style scoped>
</style>
